import BasicTable from '@/components/table/BasicTable';
import { EmployeeModel } from '@/pages/person/data';
import { deleteemployee, getemployeeList } from '@/pages/person/service';
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import { PageContainer, ProDescriptions } from '@ant-design/pro-components';
import { FormattedMessage } from '@umijs/max';
import { Button, Drawer, message } from 'antd';
import React, { useRef, useState } from 'react';
import EditForm from './editForm';
import { PlusOutlined } from '@ant-design/icons';

const CurrentPage: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const [selectedRows] = useState<EmployeeModel.employeeResponse[]>([]);
  const [currentRow, setCurrentRow] = useState<EmployeeModel.employeeResponse | undefined>(
    undefined,
  );
  const [showDetail, setShowDetail] = useState<boolean>(false);

  const handleRemoveRule = async () => {
    try {
      await deleteemployee({ codeList: selectedRows.map((row) => row.code!) });
      message.success('删除成功');
    } catch (error) {
      message.error('删除失败，请重试！');
    }
  };

  const columns: ProColumns<EmployeeModel.employeeResponse>[] = [
    {
      title: '时段名称',
      dataIndex: 'name',
      key: 'name',
      width: 100,
      fixed: 'left',
      onFilter: (value, record) => record?.name?.indexOf(value as string) === 0,
    },
    {
      search: false,
      title: '周日',
      children: [
        {
          title: '时段1',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段2',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段3',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
      ],
    },
    {
      search: false,
      title: '周一',
      children: [
        {
          title: '时段1',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段2',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段3',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
      ],
    },
    {
      search: false,
      title: '周二',
      children: [
        {
          title: '时段1',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段2',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段3',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
      ],
    },
    {
      search: false,
      title: '周三',
      children: [
        {
          title: '时段1',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段2',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段3',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
      ],
    },
    {
      search: false,
      title: '周四',
      children: [
        {
          title: '时段1',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段2',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段3',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
      ],
    },
    {
      search: false,
      title: '周五',
      children: [
        {
          title: '时段1',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段2',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段3',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
      ],
    },
    {
      search: false,
      title: '周六',
      children: [
        {
          title: '时段1',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段2',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
        {
          title: '时段3',
          dataIndex: 'age',
          key: 'age',
          width: 150,
        },
      ],
    },
    {
      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      width: 80,
      render: (_, record) => [
        <EditForm
          key="config"
          onOk={actionRef.current?.reload}
          initialValues={record}
          trigger={<a>修改</a>}
        />,
      ],
    },
  ];

  return (
    <PageContainer>
      <BasicTable<EmployeeModel.employeeResponse, EmployeeModel.employeeRequest>
        removeRule={handleRemoveRule}
        columns={columns}
        request={async (params) => {
          const msg = await getemployeeList({
            name: params.name,
            pageNum: params.current,
            pageSize: params.pageSize,
          });
          return {
            data: msg.result?.items || [],
            total: msg.result?.totalCount || 0,
            success: true,
          };
        }}
        renderToolBar={() => [
          <EditForm
            key="create"
            onOk={actionRef.current?.reload}
            trigger={
              <Button type="primary" icon={<PlusOutlined />}>
                <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
              </Button>
            }
          />,
        ]}
      />
      <Drawer
        width={600}
        open={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={false}
      >
        {currentRow && (
          <ProDescriptions<EmployeeModel.employeeResponse>
            column={2}
            title={currentRow.name}
            request={async () => ({
              data: currentRow || {},
            })}
            params={{ id: currentRow.code }}
            columns={columns as ProDescriptionsItemProps<EmployeeModel.employeeResponse>[]}
          />
        )}
      </Drawer>
    </PageContainer>
  );
};

export default CurrentPage;
